<template>
  <div class="search-con">
    <div class="s-box">
      <p class="sb-tit">企业画像</p>
      <div class="search-box">
        <el-input
          placeholder="请输入关键词查询"
          v-model="searchTxt"
          @keydown.enter.native="search"
          class="elinp"
        >
          <div slot="prefix">
            <el-dropdown
              trigger="click"
              placement="bottom"
              @command="handleCommand"
            >
              <span class="el-dropdown-link">
                {{ searchTypeName
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="beforeCommand('1', '企业名称')"
                  >企业名称</el-dropdown-item
                >
                <el-dropdown-item :command="beforeCommand('2', '法人')"
                  >法人</el-dropdown-item
                >
                <el-dropdown-item :command="beforeCommand('3', '经营范围')"
                  >经营范围</el-dropdown-item
                >
                <el-dropdown-item :command="beforeCommand('4', '注册地址')"
                  >注册地址</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-button slot="suffix" icon="el-icon-search" @click="search" class="search-button">搜索</el-button>
        </el-input>
        <!-- <el-button slot="append" @click="search" class="search-button"
          >搜索</el-button
        > -->
        <!-- <el-button @click="handleQCC">查看企查查企业画像</el-button> -->
      </div>
    </div>
    <dl class="item-box">
      <dd>
        <span class="label">按产业筛选：</span>
        <div class="tag-box">
          <el-tag
            v-for="(item, index) in industryTagList"
            :key="index"
            :disable-transitions="false"
            @click="handleClickTag(item.dictValue)"
          >
            <!-- @close="removeItem(item)" -->
            <!-- closable -->
            {{ item.dictValue }}
          </el-tag>
          <!-- <el-input
            ref="saveIndustryTag"
            v-if="industryTagVisable"
            v-model="industryTagNewTag"
            size="small"
            class="input-new-tag"
            @keyup.enter.native="handleAddNewTag"
            @blur="handleAddNewTag"
          >
          </el-input> -->
          <!-- <el-button
            v-else
            size="small"
            icon="el-icon-plus"
            class="button-new-tag"
            @click="showTagInp"
            >产业标签</el-button
          > -->
        </div>
      </dd>
      <dd>
        <span class="label">按类型筛选：</span>
        <div class="tag-box">
          <el-tag
            v-for="(item, index) in typeList"
            :key="index"
            @click="handleClickTag(item)"
            >{{ item }}</el-tag
          >
        </div>
      </dd>
      <dd>
        <span class="label">按区域筛选：</span>
        <div
          class="tag-box has-more hide-more"
          :class="{ 'show-more': itemMore['区域'] }"
        >
          <el-tag
            v-for="(item, index) in areaList"
            :key="index"
            @click="handleClickTag(item.label)"
            >{{ item.label }}</el-tag
          >
        </div>
        <div @click="handleChangeItemMore('区域')" class="more-btn">
          <span>更多</span>
          <i
            :class="{
              'el-icon-caret-bottom': !itemMore['区域'],
              'el-icon-caret-top': itemMore['区域'],
            }"
          ></i>
        </div>
      </dd>
    </dl>
    <div class="recommend-box flex">
      <HostList
        v-for="(list, index) in enterpriseList"
        :key="index"
        :listInfo="list"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTxt: "",
      searchTypeName: "企业名称",
      searchType: "1",
      // 按产业筛选
      industryTagList: [],
      typeList: [
        "大陆企业",
        "社会组织",
        "机关单位",
        "事业单位",
        "港澳台及国外企业",
      ], // 按类型筛选
      areaList: [], // 按区域筛选
      // 更多
      itemMore: {
        区域: false,
      },
      enterpriseList: [],
    };
  },
  created() {
    this.init();
  },
  mounted() {
    this.areaSelect();
  },
  methods: {
    init() {
      const data = JSON.parse(localStorage.getItem("allDict"));
      this.industryTagList = data.find((list) => {
        return list.dictType == "information_industry";
      }).dataList;
      this.enterpriseList = data.find((list) => {
        return list.dictType == "hot_enterprise";
      }).dataList;
      this.getHotEList();
    },
    // 点击tag
    handleClickTag(item) {
      this.searchTxt = item;
      this.search();
    },
    search() {
      if (this.searchTxt == "") {
        this.$message({
          type: "warning",
          message: "请输入关键词",
          duration: 1000,
        });
        return;
      }
      this.$router.push({
        name: "EISearchResult",
        params: {
          keyword: this.searchTxt,
          searchTypeName: this.searchTypeName,
          searchType: this.searchType,
          ipi: 1,
        },
      });
    },
    // 领域热门企业
    getHotEList() {
      this.enterpriseList.forEach((list, index) => {
        list.title = list.dictLabel;
        list.list = [];
        this.getHotEnterprise(list, index);
      });
    },
    getHotEnterprise(list, index) {
      this.$get(this.$Url.company.hotEnterprise, {
        page: 1,
        limit: 8,
        enterprise: list.dictValue,
      }).then((res) => {
        this.$set(this.enterpriseList[index], "dataList", res.data.list);
        // console.log("enterpriseList", this.enterpriseList);
      });
    },
    // 切换下拉菜单项
    beforeCommand(command, name) {
      return {
        command: command,
        name: name,
      };
    },
    // 切换下拉菜单项
    handleCommand(command) {
      this.searchTypeName = command.name;
      this.searchType = command.command;
    },

    // 切换单项更多展示
    handleChangeItemMore(str) {
      this.itemMore[str] = !this.itemMore[str];
    },
    // 省市
    areaSelect() {
      this.$post(this.$Url.patent.regionInfo, {
        supId: "000000", // 根据上级ID查询所属下级机构，最顶级criCode是 000000  苏州320000
      })
        .then((res) => {
          if (res.data) {
            res.data.forEach((i) => {
              this.areaList.push({
                value: i.criCode,
                label: i.criName,
              });
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  components: {
    HostList: () => import("./hostList.vue"),
  },
};
</script>

<style lang="scss" scoped>
.search-con {
  height: calc(100vh - 0.7rem);
  // background: url("../../../../assets/img/search-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  overflow-y: auto;
}
.s-box {
  height: 400px;
  position: relative;
  z-index: 2;
  padding-top: 100px;
  // background-color: $color45;
  color: #fff;
  // background: url("../../../../assets/img/IR/ei.jpg");
  background: url("../../../../assets/bg1.png");
  background-size: 100% 100%;

  .sb-tit {
    margin-bottom: 20px;
    font-size: 35px;
    font-weight: 600;
    text-align: center;
  }
  .search-box {
    position: relative;
    width: 800px;
    // width: 9.3rem;
    margin: 0 auto;
    display: flex;
    .elinp {
      position: relative;
      ::v-deep {
        .el-input__inner {
          height: 0.54rem;
          line-height: 0.54rem;
          padding-left: 1.5rem;
          border-color: $mainColor;
          border-radius: 0.08rem;
          font-size: 0.18rem;
          color: #283146;
          &:focus {
            border-color: $mainColor;
          }
        }
        .el-input__prefix {
          width: 1.3rem;
          height: calc(0.54rem - 2px);
          line-height: calc(0.53rem - 2px);
          margin-top: 1px;
          border-right: 1px solid #dbdef2;
          .el-dropdown-link {
            font-size: 0.16rem;
          }
        }
        .el-input__suffix {
          right: 2px;
          top: 2px;

          .el-button {
            width: 0.94rem;
            border-radius: 0 0.08rem 0.08rem 0;
            font-size: 0.18rem;
            color: #fff;
            background-color: $mainColor;
            border-color: $mainColor;
            height: 0.50rem;
          }

        }
      }
      .search-icon {
        position: absolute;
        top: 0;
      }
    }
    .search-button {
      width: 0.94rem;
      height: 0.54rem;
      border-radius: 0.08rem;
      font-size: 0.18rem;
      color: #fff;
      background-color: $mainColor;
      margin-left: 0.18rem;
      border-color: $mainColor;
    }
  }
}
.recommend-box {
  z-index: 2;
  width: 80%;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  margin: 0 auto;
  justify-content: space-between;
}
.item-box {
  position: relative;
  z-index: 2;
  width: 60%;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  margin: 0 auto;
  dd {
    display: flex;
    width: 100%;
    .label {
      width: 100px;
      line-height: 30px;
      font-size: 14px;
    }
    .elinp {
      width: calc(100% - 100px);
    }
    .elselect {
      width: calc(100% - 100px);
      max-width: 240px;
    }
    .tag-box {
      width: calc(100% - 100px);
      &.has-more {
        width: calc(100% - 160px);
      }
      ::v-deep {
        .el-tag {
          border-color: $hoverColor;
          margin-right: 10px;
          margin-bottom: 10px;
          color: $mainColor;
          background-color: $hoverColor;
          cursor: pointer;
          &.bg2 {
            background-color: #fff;
          }
          .el-tag__close {
            color: $mainColor;
            transform: scale(1) !important;
            &:hover {
              color: #fff;
              background-color: $mainColor;
            }
          }
        }
        .el-tag--medium {
          height: 32px;
          line-height: 30px;
        }
        .button-new-tag {
          height: 32px;
          line-height: 30px;
          padding-top: 0;
          padding-bottom: 0;
          margin-right: 10px;
          margin-bottom: 10px;
        }
        .input-new-tag {
          width: 90px;
          // height: 30px;
          margin-right: 10px;
          font-size: 12px;
          vertical-align: center;
        }
      }
      &.hide-more {
        height: 34px;
        overflow: hidden;
      }
      &.show-more {
        height: auto;
      }
    }
    .more-btn {
      width: 60px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      color: #606266;
      cursor: pointer;
    }
  }
}
.news-panel {
  width: 9.3rem;
  height: 4.82rem;
  background: #fff;
  border-radius: 0.08rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.09rem 0;
  box-shadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, 0.1);
  dd {
    height: 100%;
    overflow: hidden;
    padding: 0 0.4rem;
    position: relative;
    h4 {
      font-weight: 700;
      font-size: 0.16rem;
      line-height: 0.38rem;
      color: #1e243e;
    }
    .warp {
      width: 100%;
      height: calc(0.6rem * 7);
      overflow: hidden;
    }
    ul {
      list-style: none;
      li {
        display: block;
        width: 100%;
        line-height: 0.42rem;
        font-size: 0.14rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #686c7f;
        cursor: default;
        img {
          width: 0.1rem;
          height: 0.1rem;
          margin-right: 0.1rem;
        }
      }
    }
  }
  .panel-1 {
    flex: auto;
    &::after {
      content: "";
      height: calc(100% - 0.3rem);
      width: 1px;
      background: #f3f4f6;
      position: absolute;
      top: 0.15rem;
      right: 0;
    }
  }
  .panel-2 {
    width: 3.48rem;
    flex: none;
    li {
      cursor: pointer;
    }
  }
}
.new-info {
  width: 5rem;
  min-height: 1.5rem;
  position: fixed;
  background: rgba($color: #fff, $alpha: 0.9);
  box-shadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, 0.1);
  padding: 0.1rem 0.2rem;
  border-radius: 0.08rem;
  .new-info-loading {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.2rem;
    span {
      font-size: 0.16rem;
    }
  }
  .new-info-con {
    color: #666;
    font-size: 0.14rem;
    .new-title {
      margin-bottom: 0.04rem;
      a {
        text-decoration: underline;
        color: $mainColor;
        font-size: 0.16rem;
      }
    }
    .new-content {
      line-height: 0.22rem;
      margin-bottom: 0.08rem;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      ::v-deep em {
        color: $mainColor;
      }
    }
    .new-time {
      margin-right: 0.2rem;
    }
  }
}
</style>
